<template>
	<view>
		<navbar :parameter='parameter'></navbar>

		<view class="top-box">
			<view class="commission"> {{commission}} </view>
			<navigator :url="'/pages/user/withdrawal?commission='+commission" class="withdrawal_btn">立即提现</navigator>
		</view>
		<view class="list-box">
			<view class="tab-box" :class="sticky " :style="{top:navH+'rpx'}">
				<block v-for="(item,index) in tabBar" :key="index">
					<view class="tab-item" :class="{'active' :state==index}" @tap="tabtap(item.id)">
						<view class="">{{item.name}}</view>
					</view>
				</block>
			</view>
			<scroll-view scroll-y class="scroll-h">
				<view class="" v-if="state == 0">
					<block v-if="list1.length > 0 ">
						<view class="list1-item acea-row row-between-wrapper" v-for="(item,index) in list1"
							:key="index">
							<view>
								<view class="title"> {{item.info}} </view>
								<view class="time"> {{item.createtime}} </view>
							</view>
							<view class="num " :class="item.change_money > 0?'':'green '">
								{{ item.change_money>0?'+':''}}{{item.change_money}}
							</view>
						</view>
					</block>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
					<u-loadmore :status="status1" line dashed @loadmore="loadmore1" v-if="list1.length > 0" />
				</view>
				<view class="" v-if="state == 1">
					<block v-if="list2.length > 0 ">
						<view class="list2-item acea-row row-between-wrapper" v-for="(item,index) in list2"
							:key="index">
							<view class="acea-row row-middle">
								<image :src="item.avatar" mode="" class="pic"></image>
								<view class="name"> {{item.nickname}} </view>
							</view>
							<view class="time">{{item.jointime}}</view>
						</view>
					</block>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
					<u-loadmore :status="status2" line dashed @loadmore="loadmore2" v-if="list2.length > 0" />
				</view>
				<view class="" v-if="state == 2">
					<block v-if="list3.length > 0 ">
						<view class="list3-item" v-for="(item,index) in list3" :key="index">
							<view class="acea-row row-between-wrapper">
								<view class="acea-row row-middle">
									<image :src="item.avatar" mode="" class="pic"></image>
									<view class="name"> {{item.nickname}} </view>
								</view>
								<view class="rebate">返佣：<text>￥{{item.change_money}} </text></view>
							</view>
							<view class="line">订单编号：<text>{{item.order_sn}}</text> </view>
							<view class="line">下单时间：<text>{{item.createtime}}</text> </view>
						</view>
					</block>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
					<u-loadmore :status="status3" line dashed @loadmore="loadmore3" v-if="list3.length > 0" />
				</view>
				<view class="" v-if="state == 3">
					<block v-if="list4.length > 0 ">
						<view class="list1-item " v-for="(item,index) in list4" :key="index">
							<view class="acea-row row-between-wrapper">
								<view class="title"> {{item.type_data_word}} </view>
								<view class="status"> {{item.status_word}} </view>
							</view>
							<view class="acea-row row-between-wrapper">
								<view class="time"> {{item.createtime}} </view>
								<view class="num " :class="item.money > 0?'':'green '">
									{{ item.money>0?'+':''}}{{item.money}}
								</view>
							</view>
						</view>
					</block>
					<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-else></u-empty>
					<u-loadmore :status="status4" line dashed @loadmore="loadmore4" v-if="list4.length > 0" />
				</view>



			</scroll-view>
		</view>
	</view>
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				parameter: {
					'navbar': '1',
					'return': '1',
					'title': '我的佣金',
					'color': true,
					'class': 'transparent'
				},
				imageUrl: this.imageUrl,
				navH: app.globalData.navHeight,
				commission: '95.50',
				state: 0,
				sticky: '',
				tabBar: [{
					id: 1,
					name: '佣金明细'
				}, {
					id: 2,
					name: '推广人统计'
				}, {
					id: 3,
					name: '推广人订单'
				}, {
					id: 4,
					name: '提现记录'
				}],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				status1: 'loadmore',
				page1: 1,
				total_num1: '',
				status2: 'loadmore',
				page2: 1,
				total_num2: '',
				status3: 'loadmore',
				page3: 1,
				total_num3: '',
				status4: 'loadmore',
				page4: 1,
				total_num4: '',

			};
		},
		onLoad(option) {
			this.commissionLogLists(1);
			this.downLists(1);
			this.myOrderCommissionLists(1);
			this.myWithdrawLists(1);
			this.commission = option.commission;
		},
		onShow() {

		},
		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {
		
		},
		onShareTimeline(res) { //分享到朋友圈
		
		},
		onReachBottom() {
			console.log('触底了')
			if (this.state == 0) {
				this.loadmore1()
			} else if (this.state == 1) {
				this.loadmore2()
			} else if (this.state == 2) {
				this.loadmore3()
			} else {
				this.loadmore4()
			}
		},
		//监听屏幕滚动 判断上下滚动  
		onPageScroll: function(e) {
			if (e.scrollTop > 40) {
				this.parameter.class = 'on';
				this.sticky = 'sticky';
			} else {
				this.parameter.class = 'transparent';
				this.sticky = '';
			}

		},
		methods: {
			// 佣金明细
			async commissionLogLists(page) {
				const res = await this.$myRequest({
					url: '/api/user/commissionLogLists',
					data: {
						openid: uni.getStorageSync('openid'),
						page: page,
						limit: 10,
					}
				})
				this.list1 = [...this.list1, ...res.data.data];
				this.total_num1 = res.data.total_num;
			},
			// 推广人列表
			async downLists(page) {
				const res = await this.$myRequest({
					url: '/api/user/downLists',
					data: {
						openid: uni.getStorageSync('openid')
					}
				})
				this.list2 = res.data.data;
				this.total_num2 = res.data.total_num;
			},
			// 推广人订单
			async myOrderCommissionLists(page) {
				const res = await this.$myRequest({
					url: '/api/user/myOrderCommissionLists',
					data: {
						openid: uni.getStorageSync('openid')
					}
				})
				this.list3 = res.data.data;
				this.total_num3 = res.data.total_num;
			},
			// 提现记录
			async myWithdrawLists(page) {
				const res = await this.$myRequest({
					url: '/api/user/myWithdrawLists',
					data: {
						openid: uni.getStorageSync('openid'),
						page: page,
						limit: 10,
					}
				})
				this.list4 = [...this.list4, ...res.data.data];
				this.total_num4 = res.data.total_num;
			},
			tabtap(id) {

				this.state = id - 1;
			},
			loadmore1() {
				console.log(11111)
				if (this.total_num1 == this.list1.length) {
					this.status1 = 'nomore';
				} else {
					this.status1 = 'loading';
					this.page1++;
					this.commissionLogLists(this.page1);
				}
				setTimeout(() => {
					if (this.total_num1 == this.list1.length) this.status1 = 'nomore';
					else this.status1 = 'loading';
				}, 2000)
			},
			loadmore2() {
				console.log(2222)
				if (this.total_num2 == this.list2.length) {
					this.status2 = 'nomore';
				} else {
					this.status2 = 'loading';
					this.page2++;
					this.downLists(this.page2);
				}
				setTimeout(() => {
					if (this.total_num2 == this.list2.length) this.status2 = 'nomore';
					else this.status2 = 'loading';
				}, 2000)
			},
			loadmore3() {
				console.log(33333)
				if (this.total_num3 == this.list3.length) {
					this.status3 = 'nomore';
				} else {
					this.status3 = 'loading';
					this.page3++;
					this.downLists(this.page3);
				}
				setTimeout(() => {
					if (this.total_num3 == this.list3.length) this.status3 = 'nomore';
					else this.status3 = 'loading';
				}, 2000)
			},
			loadmore4() {
				console.log(4444)
				if (this.total_num4 == this.list4.length) {
					this.status4 = 'nomore';
				} else {
					this.status4 = 'loading';
					this.page4++;
					this.myWithdrawLists(this.page4);
				}
				setTimeout(() => {
					if (this.total_num4 == this.list4.length) this.status4 = 'nomore';
					else this.status4 = 'loading';
				}, 2000)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-box {
		position: absolute;
		left: 0;
		width: 100%;
		top: 0;
		z-index: 1;
		background: linear-gradient(-85deg, #1F83FF, #61B1FF);
		text-align: center;
		height: 400rpx;
		padding-top: 150rpx;
	}

	.top-box .commission {
		color: #fff;
		font-weight: 700;
		font-size: 70rpx;
	}

	.top-box .withdrawal_btn {
		width: 218rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #2184FF;
		text-align: center;
		line-height: 60rpx;
		margin: 30rpx auto 0 auto;
	}

	.list-box {
		position: absolute;
		left: 0;
		width: 100%;
		top: 360rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 18rpx 18rpx 0 0;
		z-index: 2;
	}

	.tab-box {
		width: 100%;
		flex-direction: row;
		white-space: nowrap;
	}

	.sticky {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
		background-color: #fff;
		z-index: 99;
	}

	.tab-item {
		display: inline-block;
		flex-wrap: nowrap;
		padding-bottom: 24rpx;
		color: #333;
		font-size: 28rpx;
		text-align: center;
		position: relative;
		width: 25%;
	}

	.tab-item.active {
		color: #1F83FF;
		font-size: 30rpx;
	}

	.tab-item.active::after {
		content: "";
		position: absolute;
		left: 50%;
		bottom: 0;
		transform: translateX(-50%);
		background-color: #1F83FF;
		height: 6rpx;
		border-radius: 8rpx;
		width: 40rpx;
	}

	.list1-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DDDDDD;
		color: #333333;
		font-size: 28rpx;
	}

	.list1-item .time {
		font-size: 24rpx;
		color: #999999;
		padding-top: 20rpx;
	}

	.list1-item .num {
		font-size: 32rpx;
		color: #FF8406;
	}

	.list1-item .num.green {
		color: #26A05E;

	}

	.list2-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DDDDDD;
		color: #333333;
		font-size: 28rpx;
	}

	.list2-item image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.list2-item .time {
		color: #555;
	}

	.list3-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DDDDDD;
		color: #333333;
		font-size: 28rpx;
	}

	.list3-item image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.list3-item .rebate text {
		color: #FF8406;
	}

	.list3-item .line {
		color: #999999;
		margin-top: 20rpx;
	}

	.list3-item .line text {
		color: #555;
	}
</style>
